<template>
  <el-dialog
    :visible.sync="state.visible"
    :fullscreen="fullscreen"
    :custom-class="!fullscreen ? 'custom-height' : 'custom-fullscreen'"
    :close-on-click-modal="false"
    :show-close="false"
    width="80%"
    @closed="close"
  >
    <el-row slot="title" type="flex">
      <el-col :span="20">{{ title }}</el-col>
      <el-col :span="4" style="text-align: right">
        <svg-icon
          :icon-class="!fullscreen ? 'fullscreen' : 'exit-fullscreen'"
          style="cursor: pointer; margin-right: 10px"
          @click="
            () => {
              fullscreen = !fullscreen;
            }
          "
        />
        <i class="el-icon-close" style="cursor: pointer" @click="close" />
      </el-col>
    </el-row>
    <el-form
      v-if="tabName == 'SCRK'"
      ref="dataForm"
      :model="form"
      label-position="right"
      label-width="100px"
    >
      <el-row :gutter="18">
        <el-col :sm="12" :span="24">
          <el-form-item
            label="入库单号"
            prop="acceptanceNum"
            :rules="{
              required: true,
              message: '入库单号必填',
              trigger: 'bulr'
            }"
          >
            <el-input
              v-model="form.acceptanceNum"
              placeholder="请输入入库单号"
            />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :span="24">
          <el-form-item
            label="商品"
            prop="goodsName"
            :rules="{
              required: true,
              message: '商品必填',
              trigger: 'bulr'
            }"
          >
            <el-select
              v-model="form.goodsName"
              
              clearable
              placeholder="请输入商品"
              :disabled="form.id != undefined"
              @click.native="form.id == undefined && $refs.goodsModal.open()"
            />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :span="24">
          <el-form-item
            label="生产任务"
            prop="taskNum"
            :rules="{
              required: true,
              message: '生产任务必填',
              trigger: 'bulr'
            }"
          >
            <el-select
              v-model="form.taskNum"
              multiple
              clearable
              placeholder="请选择生产任务"
              :disabled="form.id != undefined"
              @click.native="form.id == undefined && $refs.productTaskModal.open()"
            />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :span="24">
          <el-form-item label="备注">
            <el-input v-model="form.remarks" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :span="24">
          <el-form-item label="物料编号">
            <el-input
              v-model="form.goodsCode"
              placeholder="请输入物料编号"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :span="24">
          <el-form-item label="商品规格">
            <el-input
              v-model="form.specifications"
              placeholder="请输入商品规格"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="入库类型">
            <el-radio v-model="receiptTypeName" label="SCRK">生产入库</el-radio>
            <el-radio
              v-model="receiptTypeName"
              label="FSCRK"
            >非生产入库</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-button type="primary" @click="addShelf">添加</el-button>
        </el-col>
        <el-col
          v-for="(item, index) in form.shelfIdAndGoodsQuantityVOList"
          :key="index"
          :span="24"
        >
          <el-col :span="12">
            <el-form-item
              :label="`库位${index + 1}`"
              :prop="`shelfIdAndGoodsQuantityVOList[${index}].shelfName`"
              :rules="{
                required: true,
                trigger: 'bulr',
                message: '库位不能为空'
              }"
            >
              <el-select
                v-model="item.shelfName"
                :disabled="form.id != undefined"
                multiple
                clearable
                placeholder="请输入库位"
                @click.native="
                  form.id == undefined && openWareHouseModal(index)
                "
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="数量"
              :prop="`shelfIdAndGoodsQuantityVOList[${index}].quantity`"
              :rules="{
                required: true,
                trigger: 'bulr',
                message: '数量不能为空'
              }"
            >
              <el-input
                v-model="item.quantity"
                :disabled="form.id != undefined"
                placeholder="请输入数量"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <i
              style="font-size: 30px;"
              class="el-icon-close"
              @click="delShelf(index)"
            />
          </el-col>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">
        取消
      </el-button>
      <el-button
        type="primary"
        :loading="state.confirmSubmit"
        :disabled="state.confirmSubmit"
        @click="onSubmit"
      >
        确定
      </el-button>
    </div>
    <select-modal
      ref="wareHouseModal"
      title="选择库位"
      width="65%"
      @confirm="wareHouseConfirm"
    >
      <ware-house ref="wareHouse" slot="content" />
    </select-modal>
    <select-modal
      ref="goodsModal"
      title="商品选择"
      width="65%"
      @confirm="GooodsOK"
    >
      <goods ref="goods" slot="content" />
    </select-modal>
    <select-modal
      ref="productTaskModal"
      title="生产任务选择"
      width="85%"
      @confirm="productTaskOK"
    >
      <productTaskModal ref="productTask" slot="content" />
    </select-modal>
  </el-dialog>
</template>

<script>
import { dibootApi } from '@/utils/request'
import form from '@/components/diboot/mixins/form'
import selectModal from '@/components/SelectModal'
import wareHouse from '@/components/WareHouseLocationModal'
import goods from '@/components/GoodsModal'
import productTaskModal from '@/components/productTaskModal.vue'

export default {
  name: 'InstockForm',
  components: {
    selectModal,
    goods,
    wareHouse,
    productTaskModal
  },
  mixins: [form],
  data() {
    return {
      baseApi: '/instock',
      createApi: '/insert',
      receiptTypeName: 'SCRK',
      tabName: 'SCRK',
      isDisabled: false
    }
  },
  methods: {
    productTaskOK() {
      this.form.taskNum = [this.$refs.productTask.selectedRowInfo.taskNum]
      this.$forceUpdate()
      this.$refs.productTaskModal.close()
    },
    GooodsOK() {
      this.$refs.goodsModal.close()
      const {
        id,
        goodsName,
        goodsCode,
        specifications
      } = this.$refs.goods.templateRadio
      this.$set(this.form, 'goodsId', id)
      this.$set(this.form, 'goodsName', [goodsName])
      this.$set(this.form, 'goodsCode', goodsCode)
      this.$set(this.form, 'specifications', specifications)
    },
    close() {
      this.state.visible = false
      this.__defaultFileWrapperKeys__()
      this.clearForm()
      this.afterClose()
      this.isDisabled = false
    },
    initShelfList() {
      this.getReceiptNumber()
      this.$set(this.form, 'shelfIdAndGoodsQuantityVOList', [
        { shelfName: [], latticeId: '', quantity: undefined }
      ])
      this.$forceUpdate()
    },
    /** *
     * 提交前对数据的处理（在验证正确之后的处理）
     * @param values 提交的参数
     */
    async enhance(values) {
      if (values.taskNum.length > 0) {
        values.taskNum = values.taskNum[0]
      }
      if (values.shelfIdAndGoodsQuantityVOList.length > 0) {
        values.shelfIdAndGoodsQuantityVOList.forEach(async item => {
          await dibootApi.put(`/warehouse/lattice/${item.latticeId}`, {
            status: 1
          })
        })
      }
      values.goodsName = values.goodsName[0]
      values.receiptType = this.receiptTypeName
    },
    openWareHouseModal(index) {
      this.index = index
      this.$refs.wareHouseModal.open()
    },
    wareHouseConfirm() {
      const { id, label } = this.$refs.wareHouse.selectRowInfo
      this.form.shelfIdAndGoodsQuantityVOList[this.index].shelfName = [label]
      this.form.shelfIdAndGoodsQuantityVOList[this.index].latticeId = id
      this.$forceUpdate()
      this.$refs.wareHouseModal.close()
    },
    // 商品弹窗确认回调
    goodsConfirm() {
      const {
        id,
        goodsCode,
        specifications,
        goodsName
      } = this.$refs.goods.selectedRowInfo
      this.form.goodsId = Number(id)
      this.form.goodsCode = goodsCode
      this.form.specifications = specifications
      this.$set(this.form, 'goodsName', [goodsName])
      this.$refs.goodsModal.close()
    },
    // 添加货架
    addShelf() {
      this.form.shelfIdAndGoodsQuantityVOList.push({
        shelfId: undefined,
        quantity: undefined
      })
      this.$forceUpdate()
    },
    // 删除货架
    delShelf(index) {
      index && this.form.shelfIdAndGoodsQuantityVOList.splice(index, 1)
      this.$forceUpdate()
    },
    async afterOpen(acceptanceNum) {
      if (acceptanceNum) {
        this.form.taskNum = [this.form.taskNum]
        this.isDisabled = true
        this.title = '详情'
        this.tabName = this.form.receiptType
        this.form.shelfIdAndGoodsQuantityVOList.forEach(element => {
          element.shelfName = [element.label]
        })
      } else {
        this.initShelfList()
      }
    },
    // 获取入库单号
    getReceiptNumber() {
      dibootApi.get('instock/getNumber').then(result => {
        this.$set(this.form, 'acceptanceNum', result.data)
      })
    }
  }
}
</script>
